
<template>
  <AddTodo @addTodo="addTodo" />
  <TodoItem v-for="todo in filteredTodoList" :key="todo.id" :todo="todo" @changestatus="changestatus" @delete="deletetodo">
    {{ todo.text }}
  </TodoItem>

  <FilterTodo @changeFilter="changefilter" />
</template>

<script setup>
import TodoItem from './TodoItem.vue'
import AddTodo from './AddTodo.vue'
import FilterTodo from './FilterTodo.vue'
import {reactive, computed, ref} from 'vue'
const filter = ref('all')

const changefilter = (type) => {
  filter.value = type
}
const todoList = reactive([
  { id: Math.random(), text: 'Learn Vue', completed: true },
  { id: Math.random(), text: 'Learn React', completed: false },
  { id: Math.random(), text: 'Learn Angular', completed: false },
])

const addTodo = (todo) => {
  todoList.push({
    id: Math.random(),
    text: todo,
    completed: false
  })
console.log(todoList)

}

const changestatus = (todo) => {

todoList.find((item) => {
  if (item.id === todo.id) {
    item.completed = !item.completed
  }
})
console.log(todoList)
}

const deletetodo = (todo) => {
  todoList.splice(todoList.indexOf(todo), 1)
  console.log(todoList)
}


const filteredTodoList = computed(() => {
  switch (filter.value) {
    case 'all':
      
      return todoList
    case 'done':
      
    return todoList.filter((todo) => todo.completed === true)
    case 'not':
      
    return todoList.filter((todo) => todo.completed === false)
  }
  console.log(filter,filteredTodoList)
})
</script>